<template>
  <div>
    <h2 align="center">注册</h2>
    <table>
      <tr>
        <td>手机号:</td>
        <td><input type="text" v-model="registerData.phone" ></td>
      </tr>

      <tr>
        <td>密码:</td>
        <td><input type="password" v-model="registerData.password" ></td>
      </tr>

      <tr>
        <td>确认密码:</td>
        <td><input type="password" v-model="registerData.confirmPassword" ></td>
      </tr>

      <tr>
        <td></td>
        <td><input type="button" value="注册" @click="register" ></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

//引入
import {reactive,toRefs} from 'vue'

//路由
import { useRouter } from 'vue-router';

//路由传参
let router = useRouter()

//数据
let data = reactive({
  registerData:{
    phone:'',
    password:'',
    confirmPassword:''
  }
})

//解构
let {registerData} = toRefs(data)

//注册
const register = () =>{
  //非空判断
  if(registerData.value.phone==""){
    return alert('手机号不能为空')
  }
  //手机号长度验证
  if(registerData.value.phone.length!=11){
    return alert('手机号的长度只能是11位')
  }
  if(registerData.value.password==""){
    return alert('密码不能为空')
  }
  if(registerData.value.confirmPassword==""){
    return alert('确认密码不能为空')
  }
  //两次密码验证
  if(registerData.value.password!=registerData.value.confirmPassword){
    return alert('两次密码不一致')
  }
  if(registerData.value.phone=="13512349876" && registerData.value.password=="123456"){
    alert('注册成功')
    //跳转页面并传参
    router.push({
      path:'rsuccess',
      query:{
        phone:registerData.value.phone
      }
    })
  }else{
    return alert('手机号或密码错误') 
  }
}

</script>

<style scoped>

</style>